<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" type="text/css" href="<%=path %>/static/css/css.css?1" />
<link rel="stylesheet" type="text/css" href="<%=path %>/static/jquery-ui/jquery-ui.min.css" />
<script type="text/javascript" src="<%=path %>/static/js/json2.js"></script>
<script type="text/javascript" src="<%=path %>/static/js/jquery.js"></script>
<script type="text/javascript" src="<%=path %>/static/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="<%=path %>/static/layer/layer.js"></script>
<script type="text/javascript" src="<%=path %>/static/js/gridview.js?v=1"></script>
<script type="text/javascript" src="<%=path %>/static/js/formview.js?v=1"></script>
<script type="text/javascript" src="<%=path %>/static/js/tool.js"></script>
<script type="text/javascript" src="<%=path %>/static/js/validate.js"></script>
<script type="text/javascript" src="<%=path %>/static/js/echarts.js"></script>
<script type="text/javascript" src="<%=path %>/static/js/loadingDiv.js"></script>
</head>

<body>
<div class="contrainer">
<div class="rcon2" id="head_account" >
<div class="adver_account" >
   <div class="icon"></div>
   <div class="adver_right">
     账户余额<br>
     <span class="money">${sessionScope.userInfo.availFund}<span style="font-size:18px;">元</span></span>
   </div>
</div>
<div class="adver_spend" >
   <div class="icon"></div>
   <div class="adver_right">
      今天花费<br>
      <span class="money"><span id="expend"></span><span style="font-size:18px;">元</span></span>
   </div>
</div>
<div class="adver_task">
   <ul class="task_cnt_ul">
      <li>待审核：<span id="task_cnt1"></span></li>
      <li>不通过：<span id="task_cnt2"></span></li>
      <li>进行中：<span id="task_cnt3"></span></li>
      <li>今日更新：<span id="task_cnt4"></span></li>
   </ul>
</div>
</div>
<div class="rcon2" id="head_account">
<div class="adver_read" >
   <div class="icon"></div>
   <div class="adver_right">
      今日总点击量<br>
      <span class="money"><span id="readcnt"></span><span style="font-size:18px;">次</span></span>
   </div>
</div>
<div class="adver_share" >
   <div class="icon"></div>
   <div class="adver_right">
      今日总分享量<br>
      <span class="money"><span id="sharecnt"></span><span style="font-size:18px;">次</span></span>
   </div>
</div>
</div>
<div id="formview" class="rbox1"></div>

<div style="background:#fff;overflow:hidden;margin:0 10px;">
<div style="border-bottom:1px solid #dfdfdf;padding:20px;overflow:hidden">
  <input onchange="loadChart()" style="float:right;padding-left:8px;background-position:130px center;" class="cssTime" type="text" onclick="WdatePicker()" id="staDate" placeholder="请选择日期">
  <div style="font-size:24px;">
     <span style="color:2e3340">整体情况</span><span style="color:#abadb0">（以下数据有近三十分钟的统计延迟）</span>
  </div>
</div>
<ul class="sta_ul">
   <li>
      <div class="text" >分享量（次）</div>
      <div class="num" id="sta_sharecnt"></div>
   </li>
   <li>
       <div class="text" >点击量（次）</div>
       <div class="num" id="sta_readcnt"></div>
   </li>
   <li>
      <div class="text" >点击率（%）</div>
      <div class="num" id="sta_per"></div>
   </li>
   <li>
      <div class="text" >花费（元）</div>
      <div class="num" id="sta_expend"></div>
   </li>
</ul>
<div id="ec_line" style="width:100%;height:300px;background:#fff;">
</div>
</div>

</div>
<script type="text/javascript" src="<%=path %>/static/js/underscore.js"></script>
<script type='text/javascript' src='<%=path %>/static/My97DatePicker/WdatePicker.js'></script>
<script type='text/javascript' src='<%=path %>/dwr/engine.js'></script>
<script type='text/javascript' src='<%=path %>/dwr/util.js'></script>
<script type='text/javascript' src='<%=path %>/dwr/interface/BaseDwr.js'></script>
<script>
   $(function(){
      var staDate=new Date();
      staDate=staDate.Format("yyyy-MM-dd");
      $("#staDate").val(staDate);
      $.getJSON("<%=path %>/public/common/getAdverIndexInfo.htmls",{staDate:$("#staDate").val()},function(data){
         if(data.expend==null){
            $("#expend").text("0.0");
         }else{
            $("#expend").text(data.expend.toFixed(1));
         }
         $("#task_cnt1").text(data.taskcnt1);
         $("#task_cnt2").text(data.taskcnt2);
         $("#task_cnt3").text(data.taskcnt3);
         $("#task_cnt4").text(data.taskcnt4);
         $("#readcnt").text(data.readcnt);
         $("#sharecnt").text(data.sharecnt);
      });
      loadChart();
   });

   function loadChart(){
      myLoading.showLoading(true);

      $.getJSON("<%=path %>/public/common/getAdverIndexInfo.htmls",{staDate:$("#staDate").val()},function(data){
         if(data.expend==null){
            $("#sta_expend").text("0.0");
         }else{
            $("#sta_expend").text(data.expend.toFixed(1));
         }
         $("#sta_readcnt").text(data.readcnt);
         $("#sta_sharecnt").text(data.sharecnt);
         var per;
         if(data.sharecnt==0){
            per="0%";
         }
         else{
            per=data.readcnt/data.sharecnt;
            per=per.toFixed(2)*100;
         }
         $("#sta_per").text(per);
      });

               $.getJSON("<%=path %>/public/common/getDataReport.htmls",{date:$("#staDate").val()},function(data){
                myLoading.showLoading(false);
                  //$("#list .mtable").html("<tr><th style='width:130px;'>时间</th><th>点击量</th><th>分享量</th><th>点击率</th><th>花费（元）</th></tr>")
                                 var xData=[],series=[];
                                 var cntData1=[],cntData2=[];
                                 $.each(data,function(i,item){
                                    xData.push(item.datetime);
                                    cntData1.push(item.readCnt);
                                    cntData2.push(item.shareCnt);

                                    /*var per;
                                    if(item.shareCnt==0){
                                       per="0%";
                                    }
                                    else{
                                       per=item.readCnt/item.shareCnt;
                                       per=per.toFixed(2)*100+"%";
                                    }
                                    var html="<tr>";
                                    html+="<td style='text-align:center'>"+item.datetime+"</td>";
                                    html+="<td style='text-align:center'>"+item.readCnt+"</td>";
                                    html+="<td style='text-align:center'>"+item.shareCnt+"</td>";
                                    html+="<td style='text-align:center'>"+per+"</td>";
                                    html+="<td style='text-align:center'>"+(item.spend==null?'0.0':item.spend.toFixed(1))+"</td>";
                                    html+="</tr>";
                                    $("#list .mtable").append(html);*/
                                 });
                                 series.push({name:'点击量',type:'line',stack: '总量',data:cntData1});
                                 series.push({name:'分享量',type:'line',stack: '总量',data:cntData2});
                                 var myChartLine = echarts.init(document.getElementById('ec_line'));
                                 lineoption = {
                                    title: {
                                       text: '投放趋势图'
                                    },
                                    tooltip: {
                                       trigger: 'axis'
                                    },
                                    legend: {
                                       data:['点击量','分享量']
                                    },
                                    grid: {
                                       left: '3%',
                                       right: '4%',
                                       bottom: '3%',
                                       containLabel: true
                                    },
                                    toolbox: {
                                       feature: {
                                          saveAsImage: {}
                                       }
                                    },
                                    xAxis: {
                                       type: 'category',
                                       boundaryGap: false,
                                       data: xData
                                    },
                                    yAxis: {
                                       type: 'value'
                                    },
                                    series: series
                                 };
                                 myChartLine.setOption(lineoption);
                              });

   }
</script>
</body>
</html>